<template>
  <BasicContainer>
    <ElRow :span="24">
      <ElCol :md="4">
        <div class="tree-position">
          <FyTree :option="treeOption" :data="treeData" @node-click="nodeClick" />
        </div>
      </ElCol>
      <ElCol :md="20">
        <ElTabs v-model="materialType" @tab-click="handleClick">
          <ElTabPane name="image">
            <template #label>
              <span><i class="el-icon-picture"></i> 图片</span>
            </template>
            <div class="add_but">
              <ElUpload
                :action="actionUrl"
                :headers="headers"
                multiple
                :limit="1"
                :on-success="handleUploadSuccess"
                :file-list="fileList"
                :before-upload="beforeImageUpload"
                :data="uploadData">
                <ElButton v-if="permissions.mp_wxmaterial_add" size="mini" type="primary">点击上传</ElButton>
                <template #tip>
                  <div class="el-upload__tip">支持bmp/png/jpeg/jpg/gif格式，大小不超过2M</div>
                </template>
              </ElUpload>
            </div>
            <div v-loading="tableLoading" class="waterfall">
              <div v-for="item in tableData" :key="item.id" class="waterfall-item">
                <a target="_blank" :href="item.url">
                  <img class="material-img" :src="item.url" />
                  <div class="item-name">{{ item.name }}</div>
                </a>
                <ElRow class="ope-row">
                  <ElButton
                    v-if="permissions.mp_wxmaterial_del"
                    type="danger"
                    icon="el-icon-delete"
                    circle
                    @click="delMaterial(item)" />
                </ElRow>
              </div>
            </div>
            <div v-if="tableData.length <= 0 && !tableLoading" class="el-table__empty-block">
              <span class="el-table__empty-text">暂无数据</span>
            </div>
            <ElPagination
              :current-page.sync="page.currentPage"
              :page-sizes="[10, 20]"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
              class="pagination"
              @size-change="sizeChange"
              @current-change="currentChange" />
          </ElTabPane>
          <ElTabPane name="voice">
            <template #label>
              <span><i class="el-icon-microphone"></i> 语音</span>
            </template>
            <div class="add_but">
              <ElUpload
                :action="actionUrl"
                :headers="headers"
                multiple
                :limit="1"
                :on-success="handleUploadSuccess"
                :file-list="fileList"
                :before-upload="beforeVoiceUpload"
                :data="uploadData">
                <ElButton v-if="permissions.mp_wxmaterial_add" size="mini" type="primary">点击上传</ElButton>
                <template #tip>
                  <div class="el-upload__tip">格式支持mp3/wma/wav/amr，文件大小不超过2M，播放长度不超过60s</div>
                </template>
              </ElUpload>
            </div>
            <ElTable v-loading="tableLoading" :data="tableData" stripe border>
              <ElTableColumn prop="mediaId" label="media_id" />
              <ElTableColumn prop="name" label="名称" />
              <ElTableColumn prop="updateTime" label="更新时间" />
              <ElTableColumn fixed="right" label="操作">
                <template #default="scope">
                  <ElButton type="text" icon="el-icon-download" size="small" plain @click="handleDown(scope.row)">
                    下载
                  </ElButton>
                  <ElButton
                    v-if="permissions.mp_wxmaterial_del"
                    type="text"
                    icon="el-icon-delete"
                    size="small"
                    plain
                    @click="delMaterial(scope.row)">
                    删除
                  </ElButton>
                </template>
              </ElTableColumn>
            </ElTable>
            <ElPagination
              :current-page.sync="page.currentPage"
              :page-sizes="[10, 20]"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
              class="pagination"
              @size-change="sizeChange"
              @current-change="currentChange" />
          </ElTabPane>
          <ElTabPane name="video">
            <template #label>
              <span><i class="el-icon-video-play"></i> 视频</span>
            </template>
            <div class="add_but">
              <ElButton v-if="permissions.mp_wxmaterial_add" size="mini" type="primary" @click="handleAddVideo"
                >新建</ElButton
              >
            </div>
            <ElementDialog v-loading="addMaterialLoading" title="新建视频" :visible.sync="dialogVideoVisible">
              <ElUpload
                ref="uploadVideo"
                :action="actionUrl"
                :headers="headers"
                multiple
                :limit="1"
                :on-success="handleUploadSuccess"
                :file-list="fileList"
                :before-upload="beforeVideoUpload"
                :auto-upload="false"
                :data="uploadData">
                <template #trigger>
                  <ElButton size="mini" type="primary">选择视频</ElButton>
                  <div class="el-upload__tip">格式支持MP4，文件大小不超过10MB</div>
                </template>
              </ElUpload>
              <ElForm ref="uploadForm" :model="uploadData" :rules="uploadRules">
                <ElFormItem label="标题" prop="title">
                  <ElInput
                    v-model="uploadData.title"
                    placeholder="标题将展示在相关播放页面，建议填写清晰、准确、生动的标题" />
                </ElFormItem>
                <ElFormItem label="描述" prop="introduction">
                  <ElInput
                    v-model="uploadData.introduction"
                    :rows="3"
                    type="textarea"
                    placeholder="介绍语将展示在相关播放页面，建议填写简洁明确、有信息量的内容" />
                </ElFormItem>
              </ElForm>
              <template #footer>
                <div class="dialog-footer">
                  <ElButton @click="dialogVideoVisible = false">取 消</ElButton>
                  <ElButton v-if="permissions.mp_wxmaterial_add" type="primary" @click="subVideo">提 交</ElButton>
                </div>
              </template>
            </ElementDialog>
            <ElTable v-loading="tableLoading" :data="tableData" stripe border>
              <ElTableColumn prop="mediaId" label="media_id" />
              <ElTableColumn prop="name" label="名称" />
              <ElTableColumn prop="updateTime" label="更新时间" />
              <ElTableColumn fixed="right" label="操作">
                <template #default="scope">
                  <ElButton type="text" icon="el-icon-view" size="small" plain @click="handleInfo(scope.row)">
                    查看
                  </ElButton>
                  <ElButton
                    v-if="permissions.mp_wxmaterial_del"
                    type="text"
                    icon="el-icon-delete"
                    size="small"
                    plain
                    @click="delMaterial(scope.row)">
                    删除
                  </ElButton>
                </template>
              </ElTableColumn>
            </ElTable>
            <ElPagination
              :current-page.sync="page.currentPage"
              :page-sizes="[10, 20]"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
              class="pagination"
              @size-change="sizeChange"
              @current-change="currentChange" />
          </ElTabPane>
          <ElTabPane name="news">
            <template #label>
              <span><i class="el-icon-news"></i> 图文</span>
            </template>
            <div class="add_but">
              <ElButton v-if="permissions.mp_wxmaterial_add" type="primary" size="mini" @click="handleAddNews">
                新 增
              </ElButton>
            </div>
            <ElementDialog
              :title="operateMaterial == 'add' ? '新建图文' : '修改图文'"
              :before-close="dialogNewsClose"
              :close-on-click-modal="false"
              :visible.sync="dialogNewsVisible"
              width="80%"
              top="20px">
              <div class="left">
                <div class="select-item">
                  <div v-for="(news, index) in articlesAdd" :key="news.id">
                    <div
                      v-if="index == 0"
                      class="news-main father"
                      :class="{ activeAddNews: isActiveAddNews == index }"
                      @click="activeNews(index)">
                      <div class="news-content">
                        <img v-if="news.thumbUrl" class="material-img" :src="news.thumbUrl" />
                        <div class="news-content-title">{{ news.title }}</div>
                      </div>
                      <div v-if="articlesAdd.length > 1" class="child">
                        <ElButton type="mini" icon="el-icon-sort-down" @click="downNews(index)">下移</ElButton>
                        <ElButton
                          v-if="operateMaterial == 'add'"
                          type="mini"
                          icon="el-icon-delete"
                          @click="minusNews(index)">
                          删除
                        </ElButton>
                      </div>
                    </div>
                    <div
                      v-if="index > 0"
                      class="news-main-item father"
                      :class="{ activeAddNews: isActiveAddNews == index }"
                      @click="activeNews(index)">
                      <div class="news-content-item">
                        <div class="news-content-item-title">{{ news.title }}</div>
                        <div class="news-content-item-img">
                          <img v-if="news.thumbUrl" class="material-img" :src="news.thumbUrl" height="100%" />
                        </div>
                      </div>
                      <div class="child">
                        <ElButton
                          v-if="articlesAdd.length > index + 1"
                          type="mini"
                          icon="el-icon-sort-down"
                          @click="downNews(index)">
                          下移
                        </ElButton>
                        <ElButton type="mini" icon="el-icon-sort-up" @click="upNews(index)">上移</ElButton>
                        <ElButton
                          v-if="operateMaterial == 'add'"
                          type="mini"
                          icon="el-icon-delete"
                          @click="minusNews(index)">
                          删除
                        </ElButton>
                      </div>
                    </div>
                  </div>
                  <div
                    v-if="articlesAdd.length < 8 && operateMaterial == 'add'"
                    class="news-main-plus"
                    @click="plusNews">
                    <i class="el-icon-circle-plus icon-plus"></i>
                  </div>
                </div>
              </div>
              <div v-loading="addMaterialLoading" class="right">
                <!--富文本编辑器组件-->
                <ElRow>
                  <WxEditor
                    v-if="hackResetEditor"
                    v-model="articlesAdd[isActiveAddNews].content"
                    :upload-data="uploadData" />
                </ElRow>
                <br /><br /><br /><br />
                <div class="input-tt">封面和摘要：</div>
                <div>
                  <div class="thumb-div">
                    <img
                      v-if="articlesAdd[isActiveAddNews].thumbUrl"
                      class="material-img"
                      :src="articlesAdd[isActiveAddNews].thumbUrl"
                      :class="isActiveAddNews == 0 ? 'avatar' : 'avatar1'" />
                    <i
                      v-else
                      class="el-icon-plus avatar-uploader-icon"
                      :class="isActiveAddNews == 0 ? 'avatar' : 'avatar1'"></i>
                    <div class="thumb-but">
                      <ElUpload
                        :action="actionUrl"
                        :headers="headers"
                        multiple
                        :limit="1"
                        :on-success="handleUploadSuccess"
                        :file-list="fileList"
                        :before-upload="beforeThumbImageUpload"
                        :data="uploadData">
                        <template #trigger>
                          <ElButton size="mini" type="primary">本地上传</ElButton>
                        </template>
                        <ElButton size="mini" type="primary" style="margin-left: 5px" @click="openMaterial">
                          素材库选择
                        </ElButton>
                        <template #tip>
                          <div class="el-upload__tip">支持bmp/png/jpeg/jpg/gif格式，大小不超过2M</div>
                        </template>
                      </ElUpload>
                    </div>
                  </div>
                  <ElementDialog title="选择图片" :visible.sync="dialogImageVisible" width="80%" append-to-body>
                    <WxMaterialSelect
                      :obj-data="{ repType: 'image', appId: checkAppId }"
                      @selectMaterial="selectMaterial" />
                  </ElementDialog>
                  <ElInput
                    v-model="articlesAdd[isActiveAddNews].digest"
                    :rows="8"
                    type="textarea"
                    placeholder="请输入摘要"
                    class="digest"
                    maxlength="120" />
                </div>
                <div class="input-tt">标题：</div>
                <ElInput v-model="articlesAdd[isActiveAddNews].title" placeholder="请输入标题" />
                <div class="input-tt">作者：</div>
                <ElInput v-model="articlesAdd[isActiveAddNews].author" placeholder="请输入作者" />
                <div class="input-tt">原文地址：</div>
                <ElInput v-model="articlesAdd[isActiveAddNews].contentSourceUrl" placeholder="请输入原文地址" />
              </div>
              <template #footer>
                <div class="dialog-footer">
                  <ElButton @click="dialogNewsVisible = false">取 消</ElButton>
                  <ElButton v-if="permissions.mp_wxmaterial_add" type="primary" @click="subNews">提 交</ElButton>
                </div>
              </template>
            </ElementDialog>
            <div v-loading="tableLoading" class="waterfall">
              <template v-if="item.content && item.content.newsItem"></template>
              <div v-for="item in tableData" :key="item.id" class="waterfall-item">
                <WxNews :obj-data="item.content.newsItem" />
                <ElRow class="ope-row">
                  <ElButton type="primary" icon="el-icon-edit" circle @click="handleEditNews(item)" />
                  <ElButton type="danger" icon="el-icon-delete" circle @click="delMaterial(item)" />
                </ElRow>
              </div>
            </div>
            <div v-if="tableData.length <= 0 && !tableLoading" class="el-table__empty-block">
              <span class="el-table__empty-text">暂无数据</span>
            </div>
            <ElPagination
              :current-page.sync="page.currentPage"
              :page-sizes="[10, 20]"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
              class="pagination"
              @size-change="sizeChange"
              @current-change="currentChange" />
          </ElTabPane>
        </ElTabs>
      </ElCol>
    </ElRow>
  </BasicContainer>
</template>

<script>
  import { addObj, delObj, getMaterialOther, getMaterialVideo, getPage, materialNewsUpdate } from '@/api/mp/wx-material'
  import { fetchAccountList } from '@/api/mp/wx-account'
  import { mapState } from 'vuex'
  import { getToken } from '@/util/auth'

  export default {
    name: 'WxMaterial',
    data() {
      return {
        treeOption: {
          nodeKey: 'id',
          addBtn: false,
          menu: false,
          props: {
            labelText: '标题',
            label: 'name',
            value: 'appid',
            children: 'children'
          }
        },
        treeData: [],
        checkAppId: undefined,
        materialType: 'image',
        tableData: [],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        page1: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        tableLoading: false,
        actionUrl: '/mp/wx-material/materialFileUpload',
        headers: {
          'TENANT-ID': this.sysUser.tenantId,
          Authorization: `Bearer ${getToken()}`
        },
        fileList: [],
        dialogVideoVisible: false,
        dialogNewsVisible: false,
        addMaterialLoading: false,
        uploadData: {
          mediaType: 'image',
          title: '',
          introduction: '',
          appId: ''
        },
        uploadRules: {
          title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
          introduction: [{ required: true, message: '请输入描述', trigger: 'blur' }]
        },
        articlesAdd: [
          {
            title: '',
            thumbMediaId: '',
            author: '',
            digest: '',
            showCoverPic: '',
            content: '',
            contentSourceUrl: '',
            needOpenComment: '',
            onlyFansCanComment: '',
            thumbUrl: ''
          }
        ],
        isActiveAddNews: 0,
        dialogImageVisible: false,
        imageListData: [],
        tableLoading1: false,
        operateMaterial: 'add',
        articlesMediaId: '',
        hackResetEditor: false
      }
    },
    computed: {
      ...mapState('user', ['permissions', 'sysUser'])
    },
    created() {
      this.getAccountList()
    },
    methods: {
      nodeClick(data) {
        this.checkAppId = data.appid
        this.uploadData.appId = data.appid
        this.getPage(this.page)
      },
      getAccountList() {
        fetchAccountList().then(response => {
          this.treeData = response.data.data
          // 默认选中第一个
          if (this.treeData.length > 0) {
            this.nodeClick(this.treeData[0])
          }
        })
      },
      dialogNewsClose(done) {
        this.$confirm('修改内容可能还未保存，确定关闭吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.hackResetEditor = false // 销毁组件
            this.$nextTick(() => {
              this.hackResetEditor = true // 重建组件
            })
            this.isActiveAddNews = 0
            done()
          })
          .catch(() => {})
      },
      downNews(index) {
        const temp = this.articlesAdd[index]
        this.articlesAdd[index] = this.articlesAdd[index + 1]
        this.articlesAdd[index + 1] = temp
        this.isActiveAddNews = index + 1
      },
      upNews(index) {
        const temp = this.articlesAdd[index]
        this.articlesAdd[index] = this.articlesAdd[index - 1]
        this.articlesAdd[index - 1] = temp
        this.isActiveAddNews = index - 1
      },
      getPage1() {
        this.tableLoading1 = true
        getPage({
          current: this.page1.currentPage,
          size: this.page1.pageSize,
          type: 'image',
          appId: this.checkAppId
        })
          .then(response => {
            this.tableLoading1 = false
            this.imageListData = response.data.data.items
            this.page1.total = response.data.data.totalCount
          })
          .catch(() => {
            this.tableLoading1 = false
          })
      },
      selectMaterial(item) {
        this.dialogImageVisible = false
        this.articlesAdd[this.isActiveAddNews].thumbMediaId = item.mediaId
        this.articlesAdd[this.isActiveAddNews].thumbUrl = item.url
      },
      openMaterial() {
        this.imageListData = null
        this.page1.currentPage = 1
        this.getPage1()
        this.dialogImageVisible = true
      },
      activeNews(index) {
        this.hackResetEditor = false // 销毁组件
        this.$nextTick(() => {
          this.hackResetEditor = true // 重建组件
        })
        this.isActiveAddNews = index
      },
      minusNews(index) {
        this.$confirm('确定删除该图文吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.articlesAdd.splice(index, 1)
            if (this.isActiveAddNews === index) {
              this.isActiveAddNews = 0
            }
          })
          .catch(() => {})
      },
      plusNews() {
        this.articlesAdd.push({
          title: '',
          thumbMediaId: '',
          author: '',
          digest: '',
          showCoverPic: '',
          content: '',
          contentSourceUrl: '',
          needOpenComment: '',
          onlyFansCanComment: '',
          thumbUrl: ''
        })
        this.isActiveAddNews = this.articlesAdd.length - 1
      },
      handleInfo(row) {
        this.tableLoading = true
        getMaterialVideo({
          mediaId: row.mediaId,
          appId: this.checkAppId
        })
          .then(response => {
            this.tableLoading = false
            const downUrl = response.data.data.downUrl
            window.open(downUrl, '_blank')
          })
          .catch(() => {
            this.tableLoading = false
          })
      },
      handleDown(row) {
        this.tableLoading = true
        getMaterialOther({
          mediaId: row.mediaId,
          fileName: row.name,
          appId: this.checkAppId
        })
          .then(response => {
            this.tableLoading = false
            const url = window.URL.createObjectURL(new Blob([response.data]))
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', row.name)
            document.body.appendChild(link)
            link.click()
          })
          .catch(() => {
            this.tableLoading = false
          })
      },
      subNews() {
        this.addMaterialLoading = true
        if (this.operateMaterial === 'add') {
          addObj({
            articles: this.articlesAdd,
            appId: this.checkAppId
          })
            .then(response => {
              this.addMaterialLoading = false
              this.dialogNewsVisible = false
              this.isActiveAddNews = 0
              this.articlesAdd = [
                {
                  title: '',
                  thumbMediaId: '',
                  author: '',
                  digest: '',
                  showCoverPic: '',
                  content: '',
                  contentSourceUrl: '',
                  needOpenComment: '',
                  onlyFansCanComment: '',
                  thumbUrl: ''
                }
              ]
              this.page.currentPage = 1
              this.getPage(this.page)
            })
            .catch(() => {
              this.addMaterialLoading = false
            })
        }
        if (this.operateMaterial === 'edit') {
          materialNewsUpdate({
            articles: this.articlesAdd,
            mediaId: this.articlesMediaId,
            appId: this.checkAppId
          })
            .then(response => {
              this.addMaterialLoading = false
              this.dialogNewsVisible = false
              this.isActiveAddNews = 0
              this.articlesAdd = [
                {
                  title: '',
                  thumbMediaId: '',
                  author: '',
                  digest: '',
                  showCoverPic: '',
                  content: '',
                  contentSourceUrl: '',
                  needOpenComment: '',
                  onlyFansCanComment: '',
                  thumbUrl: ''
                }
              ]
              this.getPage(this.page)
            })
            .catch(() => {
              this.addMaterialLoading = false
            })
        }
      },
      subVideo() {
        this.$refs.uploadForm.validate(valid => {
          if (valid) {
            this.$refs.uploadVideo.submit()
          } else {
            return false
          }
        })
      },
      handleAddVideo() {
        this.dialogVideoVisible = true
      },
      handleEditNews(item) {
        this.hackResetEditor = false // 销毁组件
        this.$nextTick(() => {
          this.hackResetEditor = true // 重建组件
        })
        if (this.operateMaterial === 'add') {
          this.isActiveAddNews = 0
        }
        this.operateMaterial = 'edit'
        this.articlesAdd = JSON.parse(JSON.stringify(item.content.newsItem))
        this.articlesMediaId = item.mediaId
        this.dialogNewsVisible = true
      },
      handleAddNews() {
        this.hackResetEditor = false // 销毁组件
        this.$nextTick(() => {
          this.hackResetEditor = true // 重建组件
        })
        if (this.operateMaterial === 'edit') {
          this.isActiveAddNews = 0
          this.articlesAdd = [
            {
              title: '',
              thumbMediaId: '',
              author: '',
              digest: '',
              showCoverPic: '',
              content: '',
              contentSourceUrl: '',
              needOpenComment: '',
              onlyFansCanComment: '',
              thumbUrl: ''
            }
          ]
        }
        this.operateMaterial = 'add'
        this.dialogNewsVisible = true
      },
      beforeThumbImageUpload(file) {
        this.addMaterialLoading = true
        const isType =
          file.type === 'image/jpeg' ||
          file.type === 'image/png' ||
          file.type === 'image/gif' ||
          file.type === 'image/bmp' ||
          file.type === 'image/jpg'
        const isLt = file.size / 1024 / 1024 < 2
        if (!isType) {
          this.$message.error('上传图片格式不对!')
        }
        if (!isLt) {
          this.$message.error('上传图片大小不能超过2M!')
        }
        this.addMaterialLoading = false
        return isType && isLt
      },
      beforeImageUpload(file) {
        this.tableLoading = true
        const isType =
          file.type === 'image/jpeg' ||
          file.type === 'image/png' ||
          file.type === 'image/gif' ||
          file.type === 'image/bmp' ||
          file.type === 'image/jpg'
        const isLt = file.size / 1024 / 1024 < 2
        if (!isType) {
          this.$message.error('上传图片格式不对!')
        }
        if (!isLt) {
          this.$message.error('上传图片大小不能超过2M!')
        }
        this.tableLoading = false
        return isType && isLt
      },
      beforeVoiceUpload(file) {
        this.tableLoading = true
        const isLt = file.size / 1024 / 1024 < 2
        if (!isLt) {
          this.$message.error('上传语音大小不能超过2M!')
        }
        this.tableLoading = false
        return isLt
      },
      beforeVideoUpload(file) {
        this.addMaterialLoading = true
        const isType = file.type === 'video/mp4'
        const isLt = file.size / 1024 / 1024 < 10
        if (!isType) {
          this.$message.error('上传视频格式不对!')
        }
        if (!isLt) {
          this.$message.error('上传视频大小不能超过10M!')
        }
        this.addMaterialLoading = false
        return isType && isLt
      },
      delMaterial(item) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.tableLoading = true
          delObj({
            id: item.mediaId,
            appId: this.checkAppId
          })
            .then(() => {
              this.getPage(this.page)
              this.tableLoading = false
            })
            .catch(() => {
              this.tableLoading = false
            })
        })
      },
      handleUploadSuccess(response, file, fileList) {
        this.tableLoading = false
        this.addMaterialLoading = false
        if (response.code === 0) {
          this.dialogVideoVisible = false
          this.fileList = []
          this.uploadData.title = ''
          this.uploadData.introduction = ''
          if (this.materialType !== 'news') {
            this.page.currentPage = 1
            this.getPage(this.page)
          } else {
            this.articlesAdd[this.isActiveAddNews].thumbMediaId = response.data.mediaId
            this.articlesAdd[this.isActiveAddNews].thumbUrl = response.data.url
          }
        } else {
          this.$message.error(`上传出错：${response.msg}`)
        }
      },
      handleClick(tab, event) {
        if (this.checkAppId) {
          this.getPage(this.page)
        } else {
          this.$message.error('请先选择公众号')
        }
        const materialType = tab.name
        this.page.currentPage = 1
        this.materialType = materialType
        this.uploadData.mediaType = materialType
        if (materialType === 'news') {
          this.uploadData.mediaType = 'image'
        }
      },
      getPage(page, params) {
        this.tableData = []
        this.tableLoading = true
        getPage(
          Object.assign(
            {
              current: page.currentPage,
              size: page.pageSize,
              type: this.materialType,
              appId: this.checkAppId
            },
            params
          )
        )
          .then(response => {
            this.tableData = response.data.data.items
            this.page.total = response.data.data.totalCount
            this.page.currentPage = page.currentPage
            this.page.pageSize = page.pageSize
            this.tableLoading = false
          })
          .catch(() => {
            this.tableLoading = false
          })
      },
      sizeChange(val) {
        this.page.currentPage = 1
        this.page.pageSize = val
        this.getPage(this.page)
      },
      currentChange(val) {
        this.page.currentPage = val
        this.getPage(this.page)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tree-position {
    margin: 12px 20px 0 0;
  }

  .pagination {
    float: right;
    margin-right: 25px;
  }

  .add_but {
    padding: 10px;
  }

  .ope-row {
    margin-top: 5px;
    padding-top: 5px;
    text-align: center;
    border-top: 1px solid #eaeaea;
  }

  .item-name {
    overflow: hidden;
    font-size: 12px;
    white-space: nowrap;
    text-align: center;
    text-overflow: ellipsis;
  }

  .el-upload__tip {
    margin-left: 5px;
  }

  /* 新增图文 */
  .left {
    display: inline-block;
    width: 35%;
    margin-top: 200px;
    vertical-align: top;
  }

  .right {
    display: inline-block;
    width: 60%;
    margin-top: -40px;
  }

  .avatar-uploader {
    display: inline-block;
    width: 20%;
  }

  .avatar-uploader .el-upload {
    position: relative;
    overflow: hidden;
    text-align: unset !important;
    border-radius: 6px;
    cursor: pointer;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    width: 120px;
    height: 120px;
    color: #8c939d;
    font-size: 28px;
    line-height: 120px;
    text-align: center;
    border: 1px solid #d9d9d9;
  }

  .avatar {
    width: 230px;
    height: 120px;
  }

  .avatar1 {
    width: 120px;
    height: 120px;
  }

  .digest {
    display: inline-block;
    width: 60%;
    vertical-align: top;
  }

  /* 新增图文 */

  /* 瀑布流样式 */
  .waterfall {
    width: 100%;
    margin: 0 auto;
    column-count: 5;
    column-gap: 10px;
  }

  .waterfall-item {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #eaeaea;
    break-inside: avoid;
  }

  p {
    line-height: 30px;
  }

  @media (min-width: 992px) and (max-width: 1300px) {
    .waterfall {
      column-count: 3;
    }

    p {
      color: red;
    }
  }

  @media (min-width: 768px) and (max-width: 991px) {
    .waterfall {
      column-count: 2;
    }

    p {
      color: orange;
    }
  }

  @media (max-width: 767px) {
    .waterfall {
      column-count: 1;
    }
  }

  /* 瀑布流样式 */
  .news-main {
    width: 100%;
    height: 120px;
    margin: auto;
    background-color: #fff;
  }

  .news-content {
    position: relative;
    width: 100%;
    height: 120px;
    background-color: #acadae;
  }

  .news-content-title {
    position: absolute;
    bottom: 0;
    left: 0;
    display: inline-block;
    width: 98%;
    height: 25px;
    padding: 1%;
    overflow: hidden;
    color: #fff;
    font-size: 15px;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: black;
    opacity: 0.65;
  }

  .news-main-item {
    width: 100%;
    margin: auto;
    padding: 5px 0;
    background-color: #fff;
    border-top: 1px solid #eaeaea;
  }

  .news-content-item {
    position: relative;
    margin-left: -3px;
  }

  .news-content-item-title {
    display: inline-block;
    width: 70%;
    font-size: 12px;
  }

  .news-content-item-img {
    display: inline-block;
    width: 25%;
    background-color: #acadae;
  }

  .input-tt {
    padding: 5px;
  }

  .activeAddNews {
    border: 5px solid #2bb673;
  }

  .news-main-plus {
    width: 280px;
    height: 50px;
    margin: auto;
    text-align: center;
  }

  .icon-plus {
    margin: 10px;
    font-size: 25px;
  }

  .select-item {
    width: 60%;
    margin: 0 auto 10px;
    padding: 10px;
    border: 1px solid #eaeaea;
  }

  .father .child {
    position: relative;
    bottom: 25px;
    display: none;
    text-align: center;
  }

  .father:hover .child {
    display: block;
  }

  .thumb-div {
    display: inline-block;
    width: 30%;
    text-align: center;
  }

  .thumb-but {
    margin: 5px;
  }

  .material-img {
    width: 100%;
    height: 100%;
  }
</style>
